<template>
  <div>
    <h2>查看(待审批)</h2>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="部门：" prop="departmentName">
        <el-select
          style="width: 180px"
          v-model="ruleForm.departmentName"
          placeholder="全部"
          clearable
          @change="bumen"
          disabled
        >
          <el-option
            v-for="item in Department"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职位" prop="postsName" style="width: 280px">
        <el-select
          v-model="ruleForm.postsName"
          placeholder="请选择职位"
          @change="zhiwei"
          disabled
        >
          <el-option
            v-for="item in Position"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" prop="employeeName" style="width: 400px">
        <el-select v-model="ruleForm.employeeName" placeholder="请选择姓名" disabled>
          <el-option
            v-for="item in tableEmployee"
            :label="item.employeeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上级负责人" prop="superstratumCharge" style="width: 280px">
        <el-select
          v-model="ruleForm.superstratumCharge"
          placeholder="请选择上级负责人"
          disabled
        >
          <el-option label="李明" value="李明" />
          <el-option label="张三" value="张三" />
          <el-option label="王五" value="王五" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期:" prop="dateonBoard">
        <el-date-picker
          v-model="ruleForm.dateonBoard"
          type="date"
          placeholder="请选择入职日期"
          value-format="YYYY-MM-DD"
          clearable
          disabled
        />
      </el-form-item>
      <el-form-item label="最后工作日期:" prop="lastDay">
        <el-date-picker
          v-model="ruleForm.lastDay"
          type="date"
          placeholder="请选择入职日期"
          value-format="YYYY-MM-DD"
          clearable
          disabled
        />
      </el-form-item>
      <el-form-item label="离职原因:" prop="reasonforleaving">
        <el-input
          v-model="ruleForm.reasonforleaving"
          style="width: 240px"
          :rows="2"
          type="textarea"
          placeholder="请填写离职原因"
          disabled
        />
      </el-form-item>
      <el-form-item label="审批备注">
        <el-input
          v-model="form.remarks"
          style="width: 240px"
          :rows="2"
          type="textarea"
          placeholder="请输入备注信息"
        />
      </el-form-item>
      <el-form-item label="转批人">
        <el-select
          v-model="form.superstratumCharge"
          placeholder="请选择转批人"
          style="width: 280px"
        >
          <el-option v-for="item in tableUser" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Pass((xid = 1))">通过并转批</el-button>
        <el-button @click="Pass((xid = 2))">拒绝</el-button>
        <el-button @click="Pass((xid = 3))">通过并终止转批</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
  // GetemployeeName();
  GetResignModel();
  GetUser()
})
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  dimissionId:route.query.dimissionId,
  departmentName: "",
  postsName: "",
  employeeName: "",
  superstratumCharge: "",
  dateonBoard: "",
  lastDay: "",
  reasonforleaving: "",
  approvalDimission:"",
  firmId:"",
  userId:"",
  createName:"",
  createDate:""
})
let xid = 0;
const form = reactive({
    "name": route.query.name,
    "remarks": "",
    "personnelId": route.query.dimissionId,
    "field": xid,
    "superstratumCharge": "",
    tableName:"离职"
})
//审批人下拉框
const tableUser:any = ref([]);
const GetUser = () => {
    axios({
      method: "get",
      url: "http://47.96.109.219:5202/api/User/UserSelectShow"
    })
    .then(res => {
      tableUser.value = res.data.data
    })
}
const Department = ref([
    { label: 'CEO', value: 1 },
    { label: '财务部', value: 2 },
    { label: '运营部', value: 3 },
    { label: '人事部', value: 4 },
    { label: '策划部', value: 5 },
])
//职位
const Positions = ref([
    { label: '董事长', value: 1},
    { label: '财务部长', value: 2},
    { label: '运营部长', value: 3},
    { label: '人事部长', value: 4},
    { label: '策划部长', value: 5},
])
const Position:any=ref([]);
const bumen=(id:number)=>{
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
    if (selectedPosition) {
      ruleForm.departmentName = selectedPosition.label;
    }
}
const zhiwei=(id:number)=>{
  const selectedPosition = Positions.value.find(position => position.value === id);
    if (selectedPosition) {
        ruleForm.postsName = selectedPosition.label;
    }
    GetemployeeName();
}
//效验
const rules = reactive<FormRules>({
  employeeName: [
    {
      required: true,
      message: '请选择员工姓名',
      trigger: 'change',
    },
  ],
  departmentName: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  postsName: [
    {
      required: true,
      message: '请选择职位',
      trigger: 'change',
    },
  ],
  superstratumCharge: [
    {
      required: true,
      message: '请选择上级负责人',
      trigger: 'change',
    },
  ],
  dateonBoard: [
    { required: true, message: '入职日期为必填项', trigger: 'blur' },
  ],
  lastDay: [
    { required: true, message: '最后工作日期为必填项', trigger: 'blur' },
  ],
  reasonforleaving: [
    { required: true, message: '离职原因为必填项', trigger: 'blur' },
  ]
})

const tableEmployee:any=ref([]);
///员工姓名
const GetemployeeName=()=>{
  axios({
    method:"get",
    url:"empread/api/Employee/EmployeeshowResign",
    params:{
      postsId:ruleForm.postsName
    }
  })
  .then(res=>{
    tableEmployee.value=res.data.data
  })
}
//离职显示
const GetResignModel=()=>{
    axios({
        method:"get",
        url:"empread/api/Resign/GetDimissionModel",
        params:{
            id:ruleForm.dimissionId
        }
    })
    .then(res=>{
        ruleForm.departmentName=res.data.data.departmentName
        ruleForm.postsName=res.data.data.postsName
        GetemployeeName();
        ruleForm.employeeName=res.data.data.employeeName
        ruleForm.superstratumCharge=res.data.data.superstratumCharge
        ruleForm.dateonBoard=res.data.data.dateonBoard
        ruleForm.lastDay=res.data.data.lastDay
        ruleForm.reasonforleaving=res.data.data.reasonforleaving
        ruleForm.approvalDimission=res.data.data.approvalDimission
        ruleForm.firmId=res.data.data.firmId
        ruleForm.userId=res.data.data.userId
        ruleForm.createName=res.data.data.createName
        ruleForm.createDate=res.data.data.createDate
    })
}
//审批
const Pass = (id: number) => {
    console.log()
    axios.post("empwrite/api/LoginUpdate/DimissionUpdateEntity", {
        nameId: ruleForm.employeeName,
        remarks: form.remarks,
        personnelId: route.query.dimissionId,
        field: id,
        superstratumCharge: form.superstratumCharge,
        tableName:"离职"
    })
    .then(res => {
      if (res.data.data > 0) {
        router.push({
          name: "DimissionList"
        })
      }else {}
    })
}
</script>

<style scoped></style>
